<template>
<div>
  <el-container>
    <el-header height="130px">
      <!-- 顶部开始 -->
      <div id="head_t">
        <el-row class="head_t_row">
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <img src="/images/title.png" width="100%">
              </el-col>
              <el-col :span="12" >
                <img src="/images/work1.png" width="60%">
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row style="line-height: 130px;">
              <el-col :span="9">
                <el-input placeholder="请输入手机号"></el-input>
              </el-col>
              <el-col :span="9">
                <el-input placeholder="请输入验证码">
                  <template slot="suffix">
                    <el-button type="text">获取验证码</el-button>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="3">
                <el-button type="warning">登录</el-button>
              </el-col>
              <el-col :span="3">
                <el-button type="success">注册</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!--  顶部结束  -->
    </el-header>
    <el-main style="width: 1200px;margin: 20px auto">
      <!--  搜索框开始-->
      <div id="input_main">
        <el-row class="input_main_row">
          <el-col :span="20">
            <el-card>
              <el-input placeholder="请选择你要找的工作" class="input_body">
                <el-select v-model="select" slot="prepend" placeholder="请选择" class="select_i">
                  <el-option label="找工人" value="1"></el-option>
                  <el-option label="找活干" value="2"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search">搜索</el-button>
              </el-input>
            </el-card>
          </el-col>
          <el-col :span="4">
            <el-card>
              <el-button type="primary" icon="el-icon-position"><b>发布招工</b></el-button>
            </el-card>
          </el-col>
        </el-row>
        <el-row id="input_top">
          <el-col :span="2">
            <u>热门搜索:</u>
          </el-col>
          <a href="javascript:void(0)">
            <el-col :span="22" style="display: flex;justify-content: left">
              <div  v-for="item in searchArr">
                <span  style="padding: 4px 8px">{{item.jobName}}</span>
              </div>
            </el-col>
          </a>
        </el-row>
      </div>
      <!--  搜索框结束-->

      <!--    轮播图页面开始    -->
      <div id="banner">
        <el-row :gutter="10">
          <el-col :span="9" >
            <el-card>
              <el-row :gutter="10">
                  <el-col>
                    <el-card shadow="hover" class="banner_r">
                      <b style="display: flex;justify-content: left">全部普工</b>
                    </el-card>
                  </el-col>
              </el-row>
              <el-row :gutter="10" class="banner_r_center">
                <el-col  v-for="industries in jobArr" class="banner_r_top">
                  <el-card shadow="hover" class="banner_r">
                    <template>
                      <ul>
                        <li><b>{{ industries.industryName }}</b>
                          <span v-for="workIfy in industries.listWorks">{{ workIfy.workIfyName }}</span>
                        </li>
                      </ul>
                    </template>
                  </el-card>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
          <div class="banner_hover" v-if="false">
            <el-row>
              <el-col>
                <el-card>
                  <p v-for="item in jobArr">{{item.industryName}}</p>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div v-else="">
            <el-col :span="9">
              <el-row :gutter="10">
                <el-col>
                  <img src="/images/title.png" width="100%" height="338px">
                </el-col>
              </el-row>
              <el-row>
                <el-col style="margin-top:5px">
                  <div class="block">
                    <el-carousel height="285px">
                      <el-carousel-item v-for="item in 2" :key="item">
                        <img :src="`/images/work${item}.png`" width="100%">
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row>
                <el-col v-for="img in 4" style="margin-bottom: 13px">
                  <img :src="`/images/banner${img}.png`" width="100%" height="145">
                </el-col>
              </el-row>
            </el-col>
          </div>
        </el-row>
      </div>
      <!--    轮播图页面结束    -->

      <!--   最新招工页面开始   -->
      <div id="index_foot">
        <h1 align="center">最新招工</h1>
        <el-tabs :stretch="true" :value="hiringArr[0].industryId">
          <el-tab-pane :label="industry.industryName" :name="industry.industryId" v-for="industry in hiringArr" :key="industry.industryId">
            <el-row :gutter="20">
              <el-col :span="8" v-for="userWork in industry.userWorks" style="margin-top: 20px">
                <el-card>
                  <p style="display:flex;justify-content: left;margin-bottom: 15px; font-size: 19px">
                    <span  v-for="job in userWork.jobName" :key="userWork.userId">{{job}}&nbsp;&nbsp;</span>
                  </p>
                  <p style="display: flex;justify-content: space-between;margin-bottom: 15px;">
                    <span style=" color: #0092FF;font-size: 20px"><b>{{userWork.salary}}元/月</b></span>
                    <span style="font-size: 13px;">{{userWork.relseaseTime}}</span>
                  </p>
                  <div class="tables_p">
                    <el-tag size="mini" effect="info" style="color: black">贵阳南明区</el-tag>
                    <el-tag size="mini" effect="info" style="color: black">{{userWork.salary}}元/月</el-tag>
                    <el-tag size="mini" effect="info" style="color: black">{{userWork.jobName[0]}}</el-tag>
                  </div>
                  <el-divider></el-divider>
                  <el-row :gutter="5">
                      <el-row :gutter="10">
                        <el-col :span="9" style="display: flex;justify-content: space-between;">
                          <span>{{userWork.username}}</span>
                          <el-tag size="mini" effect="plain" type="success">实名</el-tag>
                          <el-tag size="mini" effect="plain">企业</el-tag>
                        </el-col>
                        <el-col :span="15" style="display: flex;justify-content: right">
                          <el-tag size="medium" effect="plain">立即联系</el-tag>
                        </el-col>
                      </el-row>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>

          </el-tab-pane>
        </el-tabs>
        <el-button type="primary" style="margin-top: 20px">查看更多</el-button>
      </div>

      <!--   最新招工页面结束   -->

<!--   热门行业开始   -->
      <div id="index_last">
        <h1 align="center">热门企业</h1>
        <el-row :gutter="10">
         <el-col :span="8" v-for="item in 3">
           <el-row>
             <el-card style="background-color: #c6e2ff">
            <el-col :span="4">
              <div class="demo-basic--circle">
                <div class="block"><el-avatar shape="square" :size="60" src="/images/work.png"></el-avatar></div>
              </div>
            </el-col>
               <el-col :span="20">
                 <div class="index_last_head">
                   <p>环翠区森宇食品批发店</p>
                   <el-button type="text">实名</el-button>
                   <el-button type="text">个体商户</el-button>
                 </div>
               </el-col>
             </el-card>
             <el-card>
               <el-col>
                 <p class="index_last_p">
                   <span>AB照货车司机 | 渝北区</span>
                   <span style="font-size: 12px">2023-05-11 13:27</span>
                 </p>
                 <div class="index_last_main">
                   <el-tag type="info" size="mini">渝北区</el-tag>
                   <el-tag type="info" size="mini">AB照货车司机</el-tag>
                   <el-tag type="info" size="mini">包住</el-tag>
                   <el-tag type="info" size="mini">五险</el-tag>
                 </div>
                 <p class="index_last_p">
                   <span>AB照货车司机 | 渝北区</span>
                   <span style="font-size: 12px">2023-05-11 13:27</span>
                 </p>
                 <div class="index_last_main">
                   <el-tag type="info" size="mini">渝北区</el-tag>
                   <el-tag type="info" size="mini">AB照货车司机</el-tag>
                   <el-tag type="info" size="mini">高温补贴</el-tag>
                   <el-tag type="info" size="mini">宿舍含有空调</el-tag>
                 </div>
                 <el-button plain :autofocus="true" style="margin-bottom: 20px">查看更多</el-button>
               </el-col>
             </el-card>
           </el-row>
         </el-col>
        </el-row>
      </div>
<!--   热门行业结束   -->

<!--   活跃工友开始   -->
      <div id="index_mo">
        <h1>活跃工友</h1>
        <el-row :gutter="10">
         <el-col :span="8" v-for="item in 9" style="margin-bottom: 20px">
           <el-row>
             <el-card>
               <el-col class="index_mo_head">
                 <div class="demo-basic--circle">
                   <div class="block"><el-avatar shape="square" :size="60" src="/images/work.png"></el-avatar>
                   </div>
                   <p>
                     <b>周先生</b>
                     <el-button type="text">实名</el-button>
                     <el-button type="text">突击队</el-button>
                     <br>
                     <span>男·34岁·汉族·工龄9年·高级工(大工)</span>
                   </p>
                 </div>
               </el-col>
               <el-col>
                 <div class="index_mo_work">
                   <span>吊车司机</span>
                 </div>
               </el-col>
               <el-col>
                 <div class="index_mo_content">
                  <p>我们有50人突击队伍，专业拆除，运建渣，打扫卫生，开慌，保洁，搬运工</p>
                 </div>
               </el-col>
             </el-card>
           </el-row>
           <el-row>
             <el-card style="background-color: #f0f9fb">
              <el-col :span="18">
                <span style="display: flex; justify-content: left;position: relative;bottom: 8px">贵州农业职业学院</span>
              </el-col>
               <el-col :span="6">
                 <el-button size="mini" style="position: relative;bottom:10px">立即联系</el-button>
               </el-col>
             </el-card>
           </el-row>
         </el-col>
        </el-row>
        <el-button type="primary">查看更多</el-button>
      </div>
<!--   活跃工友结束   -->
    </el-main>
  </el-container>
</div>
</template>

<script>
export default {
  name: "IndexView",
  data(){
    return{
      hiringArr:[], //获取到的Hiring后端数据
      searchArr:[],
      select:'',
      jobArr:[]
    }
  },
  methods: {
  },
  mounted() {
    this.axios.post("http://localhost:19430/paopao/index/search-count")
        .then((response)=>{
          if(response.data.code==20000){
            this.searchArr = response.data.data;
          }
        });
    this.axios.post("http://localhost:19430/paopao/index/hiring")
        .then((response)=>{
          if(response.data.code==20000){
            this.hiringArr = response.data.data;
            console.log(this.hiringArr);
          }
        });
    this.axios.post("http://localhost:19430/paopao/index/industry")
        .then((response)=>{
          if(response.data.code==20000){
            this.jobArr = response.data.data;
            console.log(this.jobArr);
          }
        })
  }
}
</script>

<style scoped>
.banner_hover{
  border: black 1px solid;
  width: 720px;
  height: 630px;
  display: flex;
  justify-content: left;
}

.demo-basic--circle{
  display: flex;
  justify-content: right;
}
.index_mo_content{
  margin:10px 0;
}
.index_mo_content p{
  font-size: 14px;
  margin-right: 25px;
  /* 限制宽度 */
  width: 300px;
  /* 强行让文字溢出 强行不换行 */
  white-space: nowrap;
  /* 溢出隐藏 */
  overflow: hidden;
   /* 省略标记...*/
  text-overflow: ellipsis;
}
.banner_r_center{
  overflow: auto;
  height: 530px;
}
.banner_r_top{
  width: 360px;

  /* 强行让文字溢出 强行不换行 */
  white-space: nowrap;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 省略标记...*/
  text-overflow: ellipsis
}
.banner_r_top ul li{

}

.index_mo_work span{
  background-color: #dcf0ff;
  font-size: 12px;
}
.index_mo_work{
  display: flex;
  justify-content: left;
  margin-top: 10px;
}
.demo-basic--circle>p{
  margin-left:20px;
}
.demo-basic--circle>p>b{
  margin-right: 10px;
}
.demo-basic--circle>p>span{
  font-size: 14px;
}
.index_mo_head{
  display: flex;
  justify-content: left;
}


#index_mo h1{
  font-size: 36px;
  margin: 50px 0;
}

.index_last_p{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.index_last_main{
  display: flex;
  justify-content: left;
  margin-bottom: 30px;
}
.index_last_main span{
  background-color: #dcf0ff;
  font-size: 14px;
  margin-right: 10px;
}
.index_last_head{
  margin-right: 80px;
}
.index_last_head p{
  font-size: 18px;
}
#index_last{
  margin-top: 60px;
}
#index_last>h1{
  font-size: 36px;
  margin-bottom: 50px;
}

#index_foot{
  margin-top: 200px;
}
#index_foot>h1{
  margin-bottom: 50px ;
  font-size: 36px;
}
/deep/.el-tabs__item {
  height: 45px;
  font-size: 18px;
}
.tables_p{
  padding-bottom: 20px;
}
.tables_p span{
  background-color: #f5f6fa;
  font-size: 13px;
  margin-right: 8px;
  float: left;
}



.banner_r{
  width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner_r div{
  /* 限制宽度 */
  width: 370px;
  /* 强行让文字溢出 强行不换行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner_r span{
  margin-right: 10px;
}
.banner_r b{
  margin-right: 10px;
}
.el-icon-caret-right{
  margin-top: 25px;
}

#banner{
  height: 500px;
  margin-top: 50px;
}

#head_t{
  height: 130px;
  background-color: #0092FF;
}
.input_body{
  width: 750px;
}
.select_i{
  width: 150px;
}
#head_t img{
  height: 130px;
  margin-right: 150px;
}
.head_t_row{
  width: 1200px;margin: 0 auto
}

#input_main>.input_main_row{
  margin-left: 200px;
}
#input_main span{
  background-color: white;
  margin-right: 10px;
  margin-top: 5px;
  width: 70px;
  color: #0092FF;
  font-size: 13px;
  border-radius: 2px;
}
#input_main a span:hover{
  background-color: #0092FF;
  color: white;
}
#input_top{
  margin-top: 10px;
  margin-left: 195px;
}
#input_main u{
  text-decoration: none;
}
</style>